<!doctype html>
<html lang="en">
  <head>
    <title>国大诊所-首页</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <!-- style="background-image: url(test.png)" -->
  <body style="background-image:url(test.png) ">
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
        <a class="navbar-brand" href="#">国大诊所
        <img src="https://img0.baidu.com/it/u=4281977285,1094228893&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=500" width="20px" height="20px"></a> 
    
        <div class="collapse navbar-collapse" id="collapsibleNavId">

            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <!-- 一个选项就是一个li标签 -->
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">医院概况 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">医学教育</a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">科室分布</a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">优秀校友</a>
                </li>
                <li class="nav-item active ml-5">
                  <a class="nav-link" href="#">优秀校友</a>
                </li>
                <li class="nav-item active ml-5">
                <a class="nav-link" href="#">优秀校友</a>
                </li>
                <!-- 有下拉选项的 -->
                <li class="nav-item dropdown active ml-5">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">功能导航</a>
                    <!-- 下拉选项的值 -->
                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="#">预约挂号+</a>
                        <a class="dropdown-item" href="#">查找病历+</a>
                        <a class="dropdown-item" href="#">医师介绍+</a>
                        <a class="dropdown-item" href="#">位置查询+</a>
                    </div>
                </li>
            </ul>

            
            <!-- <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form> -->
        
    </nav>
            <!-- 组件：展板 -->
            <div class="jumbotron" style="margin-bottom:0px;padding-bottom:5px;padding-top:5px;">
                <div class="row">
                  
                  
                <h1 class="display-5">就医预约系统</h1>
                
<!--                 <img src="https://img1.baidu.com/it/u=1517926119,3227415145&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" width="70%" height="180px">
 -->                <!-- <div class="col-lg-3 col-md-2 col-sm-12 "></div> -->
                </div>
                <p class="lead">International Famous Hospital</p>
                <!-- <img src="https://img1.baidu.com/it/u=1517926119,3227415145&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" width="200px" height="200px"> -->
            </div>

            <nav class="breadcrumb">
              <a class="breadcrumb-item" href="index.html">科室导航</a>
              <a class="breadcrumb-item" href="schedule.html">门诊排班</a>
              <a class="breadcrumb-item" href="patient management.html">就诊人管理</a>
              <a class="breadcrumb-item" href="order.html">我的预约信息</a> 
            </nav>
        </div>

        <div class="container" id="app">
          <div class="row">

            <div class="col-lg-3 col-md-2 col-sm-12 ">
              <h1 class="lead">科室导航</h1>
              <ul class="list-group">
                <!-- b4-list-a 快捷键
                先通过li标签循环department这个数组，得到一个部门对象
                循环一级部门的sub属性，这个属性是一个数组，得到下级部门-->
                <li class="list-group-item" 
                 v-for="(depart, index) in deaprtment" :key="index">
                    {{depart.title}}
                    <div class="list-group">
                        <a 
                            v-for="(subdepart, index) in depart.sub" :key="index"
                            class="list-group-item list-group-item-action ">
                            {{subdepart.title}}
                        </a>
                    </div>
                </li>
               
              </ul>


              <!-- <ul class="list-group">
                <li class="list-group-item">
                  妇科
                  <div class="list-group">
                      <a href="#" class="list-group-item list-group-item-action ">内生殖系统</a>
                      <a href="#" class="list-group-item list-group-item-action">外生殖系统</a>
                      <a href="#" class="list-group-item list-group-item-action ">内分泌系统</a>
                  </div>
                </li>
                <li class="list-group-item">内科</li>
                <li class="list-group-item">外科</li>
              </ul> -->
                          
            </div>
            <!-- 左边 -->
            <!-- <dic class="col-md-8 col-12"> -->
            <!-- 右边 -->
            <dic class="col-md-8 col-12">
                <h1 class="lead">国大名医介绍</h1>
                <!-- 卡片b4-card-grid -->
                <div class="row">
                    <div class="col-md-3 col-sm-5 col-6 mb-3">
                    v-for="(doc, index) in doctor" :key="index">
                    <div class="card">
                        <!-- 添加一个图片 -->
                        <img src="img/bianque.png" width="100%" height="30%"/>
                        <div class="card-body text-center">
                            <h3 class="card-title">{{doc.name}}</h3>
                            <p class="card-text">{{doc.level}}</p>
                            <p class="card-text">{{doc.department.title}}</p>
                        </div>
                        <a href="doctor.html" type="button" class="btn btn-outline-danger">挂号</a>
                    </d iv>
                </div>
                
                    <!-- <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-6">
                    <div class="card">
                      <img src="https://img1.baidu.com/it/u=4099665005,1041495993&fm=253&fmt=auto&app=138&f=JPEG?w=459&h=617" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">周神医</h3>
                        <p class="card-text">中华第二神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorzhou.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-6">
                    <div class="card">
                      <img src="https://img0.baidu.com/it/u=4179035412,2799287675&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=642" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">彭护士长</h3>
                        <p class="card-text">中华第三神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="https://www.baidu.com/">预约</a>
                      </button>
                    </div>
                  </div> -->

                </div>

                
            </dic>
         
          </div>
          <!-- 页脚&网址地图 -->
        <div class="jumbotron jumbotron-fluid mb-0 mt-3 py-1">
          <div class="container">
              <p class="lead text-center">国大诊所@2022</p>
          </div>
      </div>
          
        </div>

        
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
<script>
  // newvue---快捷
  const vm = new Vue({
        el:"#app", //当前vue对象渲染的页面  //vm.mount("#app")
        data() {
             return {
                title:"林科大东方医院",
                curDepart:"请选择科室",
                // 部门信息,data
                department:null,  
                //医生信息
                doctor:[]
             }
        },
        mounted() { //生命周期，当data中有数据了，但是我们还没有放到页面上去
            this.setSeesion(this.curDepart);
            this.getallDepartment();  //调用了查询所有的函数
        },
        methods: {
            /**查找所有的部门信息
             */ 
            getallDepartment(){
                //查询一般使用get：查询  post 添加  put 修改   delete 删除
                axios.get('http://8.142.71.174:8080/api/dept')
                .then(function (response) {
                    //response表示返回的数据对象，这个里面有很多的内容
                    vm.department = response.data;
                })
                .catch(function (error) {
                    //出现错误会返回一个error
                    console.log(error);
                })
            },
            //设置科室名字到sessionStorage中
            setSeesion(depart){
                sessionStorage.setItem("curDepart",depart);
            },
            //拿到当前科室的id和当前科室的名字
            getCurrDepartment(curdepart){
                //情况上一次查询的部门医生
                this.doctor = [];
                this.curDepart = curdepart.title;
                //修改了当前科室的名字，所以重新设置
                this.setSeesion(JSON.stringify(curdepart));
                //拿到科室的id，通过科室的id找到当前的所有医生
                axios.get('http://8.142.71.174:8080/api/doctor')
                .then((response)=>{
                    //拿到所有的医生
                   let alldoctor = response.data;
                   //遍历这个数组，得到每一个里面的对象
                   alldoctor.forEach(element => {
                       //医生.department拿到部门.id拿到部门编号
                       if(element.department.id == curdepart.id){
                            //将符合当前科室的医生存入到doctor
                            this.doctor.push(element);
                       }
                   });
                })
                .catch(function (error) {
                })
            }
        },
    }) 
/*    const vm = new Vue({
      el:"#app", //当前vue对象渲染的页面  //vm.mount("#app")
      data() {
          return {
              title:"国大诊所",
              // 部门信息,data
              deaprtment:[
                  {id:1,title:"内科",sub:[
                      {id:4,title:"呼吸内科"},
                      {id:5,title:"神经内科"},
                      {id:6,title:"消化内科"},
                      {id:7,title:"心血管内科"}
                  ]}, //sub表示下级部门
                  {id:2,title:"外科",sub:[
                      {id:8,title:"普通外科"},
                      {id:9,title:"骨科"},
                      {id:10,title:"神经外科"},
                  ]},
                  {id:3,title:"妇科",sub:[
                      {id:11,title:"妇科"},
                      {id:12,title:"产科"}
                  ]},
                  {id:4,title:"儿科",sub:[
                      {id:13,title:"儿科"},
                      {id:14,title:"新生儿科"}
                  ]}
              ],
          }
      },
  })  */


</script>